<template>
  <div class="hidden-collection">
    <div class="hidden-collect">
      <div class="hidden-collect-header">
        <div class="collect-title">
          <i>
            <svg
              t="1662530870173"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4320"
              width="200"
              height="200"
            >
              <path
                d="M518.88 287.61l35.48 71.88 79.32 11.52-57.4 55.96 13.55 79-70.95-37.3-70.95 37.3 13.55-79-57.4-55.96 79.33-11.52z"
                fill="#FFFFFF"
                p-id="4321"
              ></path>
              <path
                d="M783.27 952.69c-20.29 0-39.66-7.98-54.16-22.54L547.15 747.4c-13.95-14.01-36.78-14.15-50.9-0.33L310.59 928.83c-16.88 16.52-40.01 24.21-63.48 21.12-22.93-3.03-42.77-16.07-54.42-35.79-15.56-26.34-23.79-56.42-23.79-86.98V247.73c0-94.88 77.19-172.08 172.08-172.08h359.51c94.88 0 172.08 77.19 172.08 172.08v579.45c0 32.41-9.2 64.05-26.59 91.5-11.95 18.85-31.71 31.08-54.21 33.54-2.85 0.31-5.69 0.47-8.5 0.47zM521.52 667.93h0.69c27.87 0.18 54.05 11.15 73.72 30.91l181.96 182.75c2.43 2.44 5.5 2.32 6.38 2.22 2.49-0.27 3.3-1.56 3.57-1.98 10.4-16.4 15.9-35.3 15.9-54.64V247.73c0-56.93-46.32-103.25-103.25-103.25H340.97c-56.93 0-103.25 46.32-103.25 103.25v579.45c0 18.25 4.92 36.22 14.22 51.97 0.86 1.45 2.26 2.31 4.17 2.56 1.11 0.15 3.96 0.24 6.32-2.07L448.1 697.89c19.75-19.34 45.81-29.96 73.42-29.96z"
                fill="#231815"
                p-id="4322"
              ></path>
              <path
                d="M520.16 236.63l-50.49 102.3-112.9 16.41 81.69 79.63-19.28 112.44 100.98-53.09 100.97 53.09-19.28-112.44 81.69-79.63-112.9-16.41-50.48-102.3z"
                fill="#F7B52C"
                p-id="4323"
              ></path>
            </svg>
          </i>
          <h1>我的收藏</h1>
        </div>
      </div>
      <div class="content">
        <div class="goods-list">
          <ul>
            <li>
              <span>
                <svg
                  t="1662533551577"
                  class="icon goods-list-x"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="8353"
                  width="200"
                  height="200"
                >
                  <path
                    d="M692.35 703.51c-4.6 0-9.19-1.75-12.71-5.25L329.68 349.45c-7.04-7.02-7.06-18.41-0.04-25.46 7.02-7.04 18.42-7.06 25.46-0.04l349.97 348.81c7.04 7.02 7.06 18.42 0.04 25.46a18 18 0 0 1-12.76 5.29z"
                    fill="#353535"
                    p-id="8354"
                  ></path>
                  <path
                    d="M342.97 704.09c-4.6 0-9.19-1.75-12.71-5.25-7.04-7.02-7.06-18.42-0.04-25.46l348.81-349.97c7.02-7.04 18.42-7.06 25.46-0.04 7.04 7.02 7.06 18.41 0.04 25.46L355.72 698.79c-3.52 3.53-8.14 5.3-12.75 5.3zM763.64 836.65c-5.4 0-10.73-2.42-14.28-7.03-6.06-7.88-4.59-19.18 3.29-25.24 16.92-13.01 32.94-29.14 43.96-44.25 5.86-8.03 17.12-9.8 25.15-3.94s9.8 17.12 3.94 25.15c-13.14 18.03-31.29 36.34-51.1 51.58a17.929 17.929 0 0 1-10.96 3.73z"
                    fill="#353535"
                    p-id="8355"
                  ></path>
                  <path
                    d="M512 925.52c-55.82 0-109.97-10.94-160.96-32.5-49.24-20.83-93.46-50.64-131.44-88.61s-67.78-82.19-88.61-131.43c-21.57-50.99-32.5-105.15-32.5-160.96s10.94-109.97 32.5-160.96c20.83-49.24 50.64-93.46 88.61-131.44s82.19-67.78 131.44-88.61c50.99-21.57 105.15-32.5 160.96-32.5s109.97 10.94 160.96 32.5c49.24 20.83 93.46 50.64 131.43 88.61s67.78 82.19 88.61 131.44c21.57 50.99 32.5 105.15 32.5 160.96 0 74.09-19.83 146.78-57.34 210.21-5.06 8.56-16.1 11.39-24.66 6.33-8.56-5.06-11.39-16.1-6.33-24.66 34.25-57.9 52.35-124.25 52.35-191.9 0-50.97-9.98-100.41-29.66-146.94-19.01-44.95-46.24-85.33-80.91-120-34.68-34.68-75.05-61.9-120-80.91-46.53-19.68-95.97-29.66-146.94-29.66s-100.41 9.98-146.94 29.66c-44.95 19.01-85.33 46.24-120 80.91-34.68 34.68-61.9 75.05-80.91 120-19.68 46.53-29.66 95.97-29.66 146.94s9.98 100.41 29.66 146.94c19.01 44.95 46.24 85.33 80.91 120 34.68 34.68 75.05 61.9 120 80.91 46.53 19.68 95.97 29.66 146.94 29.66 34.38 0 68.44-4.62 101.24-13.72 9.58-2.66 19.5 2.95 22.16 12.53s-2.95 19.5-12.53 22.16c-35.94 9.98-73.25 15.04-110.88 15.04z"
                    fill="#353535"
                    p-id="8356"
                  ></path>
                </svg>
              </span>
              <a href="javascript:;"
                ><img
                  src="http://101.132.181.9:3000/public/imgs/phone/Redmi-k30-5G.png"
                />
                <h2>Redmi K30 5G</h2>
                <h3>双模5G,120Hz流速屏</h3>
                <p><span>2599元</span><span class="del">2599元</span></p></a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WCollection'
}
</script>

<style lang="less" scoped>
.hidden-collection {
  padding: 20px 0;
  background-color: #f5f5f5;
}
.hidden-collect {
  width: 100%;
}
.hidden-collect-header {
  width: 100%;
  height: 65px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.collect-title {
  width: 1225px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  i {
    width: 28px;
    height: 29px;
    .icon {
      width: 28px;
      height: 29px;
    }
  }
  h1 {
    margin-left: 15px;
    font-weight: normal;
  }
}
.content {
  width: 1225px;
  margin: 0 auto;
  padding: 20px 0;
  .goods-list {
    width: 1300px;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 234px;
        padding: 10px 0;
        margin: 0 0 14.5px 13.7px;
        background-color: white;
        transition: all 0.2s linear;
        overflow: hidden;
        position: relative;
        .goods-list-x {
          color: red;
          cursor: pointer;
          position: absolute;
          width: 20px;
          height: 20px;
          right: 20px;
          display: none;
        }
        &:hover {
          box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
          transform: translate3d(0, -2px, 0);
        }
        &:hover .goods-list-x {
          display: block;
        }
        a {
          img {
            width: 160px;
            height: 160px;
            margin: 0 37px;
          }
          h2 {
            margin: 25px 10px 0;
            text-align: center;
            font-size: 14px;
            color: #333;
          }
          h3 {
            margin: 5px 10px;
            font-size: 12px;
            text-align: center;
            color: #b0b0b0;
          }
          p {
            margin: 10px;
            text-align: center;
            color: #ff6700;
            .del {
              margin-left: 8px;
              color: #b0b0b0;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
}
</style>
